import styles from './cart.less';
import CartCard from './card'
import CartSvg from '../../assets/svg/cart'
import CloseSvg from '../../assets/svg/close'

export default function CartPop(props) {
  const cartClick = (isShowCart) => {
    props.cartClick(isShowCart)
  }
  return (
    <div className={styles.cartHome}>
      <div className={styles.cartColse} onClick={() => cartClick(false)}>
         <CloseSvg />
      </div>
      <div className={styles.cardCon}>
        <div className={styles.title}>
          <div className={styles.cartSvg} onClick={() => cartClick(true)}>
            <CartSvg />
            <div className={styles.cartIndex}>{props.cartList.length}</div>
          </div>
          <div className={styles.cartFont}>
            Cart
          </div>
        </div>
        <div className={styles.format}>
        {
            props.cartList.length ? props.cartList.map(item => {
              return <CartCard key={item.keyValue} {...item} cartOperate={props.cartOperate}/>
            }) : <div className={styles.emptyCart}>Add some products in the cart :)</div>
          }
        </div>
        <div className={styles.foot}>
          <div className={styles.installments}>
             <div className={styles.subtotal}>
               <span style={{color: '#5B5A5E'}}>SUBTOTAL</span>
               <span style={{color: '#EABF00'}}>{props.currencyFormat} {props.total}</span>
              </div>
              {
                props.cartList.length ? <div className={styles.orupto}><span style={{color: '#5B5A5E'}}>OR UP TO  {props.installments} x {props.currencyFormat}{props.price}</span></div> : <></>
              }
          </div>
          <div className={styles.bottomBtn} style={props.cartList.length ?{color: '#000', backgroundColor: '#EABF00'} : {color: '#fff', backgroundColor: '#0C0B10'}}>CHECKOUT</div>
        </div>
      </div>
    </div>
  );
}
